<style type="text/css">
    .hl-berita {
        display: inline-block;
        float: left;
    }

    .side-right {
        display: none;
    }

    .side-left {
        width: 100%;
    }

    .beritabox {
        background-color: #fbfaf3;
        height: 29em;
        width: 270px;
        padding: 1em;
        display: inline-block;
        overflow: hidden;
        margin-bottom: -0.2em;
    }
    
    .beritabox a h1:hover {
        color: red;
    }

    .art-cont {
        background-color: #fbfaf3;
        width: 900px;
        margin-top: 1.5em;
        margin-bottom: 0.9em;
    }
</style>
<div class="page-1">
    <div class="hl-berita">
        <?php $this->view("artikel/berita/hlberita"); ?>
    </div>
    <span>
        <?php foreach ($beritaPage1 as $berita) { ?>
            <div class="beritabox">
                <a href="<?php echo site_url("artikel/berita/" . $berita->id); ?>"><h1 style="margin-top: -0.3em; margin-bottom: 1.1em;"><?php echo $berita->content_id->title; ?></h1></a>
                <p>
                    <?php echo $berita->content_id->short; ?>
                </p>
            </div>
        <?php } ?>
    </span>
</div>
<div class="page-after hidden" style="margin-bottom: 0.2em;">
    <span>
    </span>
</div>
<div style="border-top: 1px solid #d4ccb0; padding: 1em; padding-top: 0.45em;">
    <div style="font-style: italic; float: left; display: inline-block;"><?php echo $pageTitle; ?></div>
    <div style="float: right; display: inline-block;">Halaman
        <a href="javascript:void(0);" onClick="javascript: $('.page-cur').text(parseInt($('.page-cur').text()) - 1);
                changePage();" class="page-prev hidden"><<</a>
        <span class="page-cur">1</span>
        <a href="javascript:void(0);" onClick="javascript: $('.page-cur').text(parseInt($('.page-cur').text()) + 1);
                changePage();" class="page-next">>></a>
    </div>
    <br />
</div>
<script type="text/javascript">
            function changePage() {
                // update pager
                var curPage = parseInt($('.page-cur').text()) - 1;
                if (curPage < 1) {
                    $('.page-prev').addClass("hidden");
                    $('.page-after').addClass("hidden");
                    $('.page-1').removeClass("hidden");
                    $('.banner-front').removeClass("hidden");
                    $('.banner-back').addClass("hidden");
                    $('.side-left').css("margin-bottom", "0em");
                } else {
                    $(".page-after span").html("Loading...");
                    $.ajax({
                        url: "<?php echo site_url("service/getDataJSON"); ?>/artrecents",
                        method: "POST",
                        dataType: "json",
                        data: {
                            page: curPage,
                            type: "B"
                        },
                        success: function(data) {
                            $(".page-after span").html("");
                            if (data.length > 0) {
                                for (var i = 0; i < data.length; i++) {
                                    var berita = data[i];
                                    var newBerita = "";
                                    newBerita += "<div class=\"beritabox\">";
                                    newBerita += "<a href=\"<?php echo site_url("artikel/berita"); ?>/" + berita.id + "\">" + "<h1 style=\"margin-top: 0.7em;margin-bottom: 1.1em;\">" + berita.content_id.title + "</h1>" + "</a>";
                                    newBerita += "<p>" + berita.content_id.short + "</p>";
                                    newBerita += "</div>";
                                    $(".page-after span").append(newBerita);
                                }
                            }
                        }
                    });
                    $('.page-prev').removeClass("hidden");
                    $('.page-after').removeClass("hidden");
                    $('.page-1').addClass("hidden");
                    $('.banner-back').removeClass("hidden");
                    $('.banner-front').addClass("hidden");
                    $('.side-left').css("margin-bottom", "0.1em");
                }
            }
</script>